<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.7.2.js"></script>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.fillRect(0,0,150,75);
</script>
<canvas id="line" width="200" height="100"></canvas>
<script>
    var x = document.getElementById('line');
    var xtx = x.getContext('2d');
    xtx.moveTo(10,10);
    xtx.lineTo(150,50);
    xtx.lineTo(20,20);
    xtx.stroke();
</script>
<canvas id="pie"></canvas>
<script>
    var c=document.getElementById("pie");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.beginPath();
    cxt.arc(70,18,15,0,Math.PI*2,true);
    cxt.closePath();
    cxt.fill();
</script>
<canvas id="color"></canvas>
<script>
    var c=document.getElementById("color");
    var cxt=c.getContext("2d");
    var grd=cxt.createLinearGradient(0,0,175,50);
    grd.addColorStop(0,"#FF0000");
    grd.addColorStop(1,"#00FF00");
    cxt.fillStyle=grd;
    cxt.fillRect(0,0,175,50);

</script>
<p>
    canvas 语法解析
</p>
<table>
    <tr>
        <td>

            ctx.fillRect(x,y,width,height);
        </td>
        <td>
            画矩形
        </td>
    </tr>
    <tr>
        <td>
            ctx.strokeRect(50,50,100,100);

        </td>
        <td>
            只有边的矩形
        </td>
    </tr>
    <tr>
        <td>
            beginPath
        </td>
        <td>
            开始一个新路径
        </td>
    </tr>
    <tr>
        <td>
            moveTo
        </td>
        <td>
            将点移动到path开始的位置
        </td>
    </tr>
    <tr>
        <td>
            lineTo
        </td>
        <td>
            从moveTo定义的点开始画一条线
        </td>
    </tr>
    <tr>
        <td>
            closePath
        </td>
        <td>
            将path的最后一个点和最初的点闭合起来
        </td>
    </tr>
    <tr>
        <td>
            fill
        </td>
        <td>
            使用某个颜色填充
        </td>
    </tr>
    <tr>
        <td>
            stroke
        </td>
        <td>
            只填充边框
        </td>
    </tr>
    <tr>
        <td>
            lineWidth
        </td>
        <td>
            border宽度
        </td>
    </tr>
    <tr>
        <td>
            ctx.clearRect((x,y,width,height);
        </td>
        <td>
            擦除
        </td>
    </tr>
    <!--http://blog.csdn.net/clh604/article/details/8536059-->
    <!--<tr>-->
        <!--<td>-->
            <!--beginPath-->
        <!--</td>-->
        <!--<td>-->
            <!--开始一个新路径-->
        <!--</td>-->
    <!--</tr>-->
    <!--<tr>-->
        <!--<td>-->
            <!--beginPath-->
        <!--</td>-->
        <!--<td>-->
            <!--开始一个新路径-->
        <!--</td>-->
    <!--</tr>-->
    <!--<tr>-->
        <!--<td>-->
            <!--beginPath-->
        <!--</td>-->
        <!--<td>-->
            <!--开始一个新路径-->
        <!--</td>-->
    <!--</tr>-->
    <!--<tr>-->
        <!--<td>-->
            <!--beginPath-->
        <!--</td>-->
        <!--<td>-->
            <!--开始一个新路径-->
        <!--</td>-->
    <!--</tr>-->
</table>
</body>
</html>